<template>
	<r-image :src="'/static/default/default-load-' + type + '.png'" class="load-icon-infinite" :style="iconStyle" />
</template>

<script>
	export default {
		props: {
			iconStyle: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'gray' // [white, gray]
			},
		}
	}
</script>

<style scoped>
	.load-icon-infinite {
		height: 30rpx;
		width: 30rpx;
		vertical-align: middle;
		animation: circle linear 1s infinite;
	}
	
	@keyframes circle {
	    0% {
	      transform-origin: 50% 50%;
	      transform: rotate(0deg);
	    }
	    100% {
	      transform-origin: 50% 50%;
	      transform: rotate(360deg);
	    }
	  }
</style>
